<%--
  Created by IntelliJ IDEA.
  User: ZLF
  Date: 2020/11/12
  Time: 21:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <title>Title</title>
    <%@include file="/WEB-INF/include-head.jsp" %>
    <%@include file="/WEB-INF/modal-menu-add.jsp" %>
    <%@include file="/WEB-INF/modal-menu-confirm.jsp" %>
    <%@include file="/WEB-INF/modal-menu-edit.jsp" %>
</head>
<body>
<script type="text/javascript">
    $(function () {
        //生成tree
        generateTree();
        //添加按钮的单机事件，显示add模态框
        $("#treeDemo").on("click", ".addBtn", function () {
            window.pid = this.id;
            $("#menuAddModal").modal("show");
            //关闭a标签的跳转
            return false;
        });
        //执行addmenu的ajax
        $("#menuSaveBtn").click(function () {
            var name = $.trim($("#menuAddModal [name=name]").val());
            var url = $.trim($("#menuAddModal [name=url]").val());
            var icon = $("#menuAddModal [name=icon]:checked").val();
            $.ajax({
                "url": "menu/save",
                "type": "post",
                "data": {
                    "pid": window.pid,
                    "name": name,
                    "url": url,
                    "icon": icon
                },
                "async": false,
                "dataType": "json",
                "success": function (response) {
                    var result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("操作成功！");
                    }
                    if (result == "FAILED") {
                        layer.msg("操作失败！" + response.message);
                    }
                },
                "error": function (response) {
                    layer.msg(response.status + " " + response.statusText);
                }
            });
            $("#menuAddModal").modal("hide");
            generateTree();
            $("#menuResetBtn").click();
        });

        //编辑的点击事件
        $("#treeDemo").on("click", ".editBtn", function () {
            window.id = this.id;
            $("#menuEditModal").modal("show");
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
            var key = "id";
            var value = window.id;
            var currentNode = zTreeObj.getNodeByParam(key, value);
            $("#menuEditModal [name=name]").val(currentNode.name);
            $("#menuEditModal [name=url]").val(currentNode.url);
            $("#menuEditModal [name=icon]").val([currentNode.icon]);
            return false;
        });
            //编辑框回显参数
        $("#menuEditBtn").click(function () {
            var name = $.trim($("#menuEditModal [name=name]").val());
            var url = $.trim($("#menuEditModal [name=url]").val());
            var icon = $("#menuEditModal [name=icon]:checked").val();
            $.ajax({
                "url": "menu/update",
                "type": "post",
                "data": {
                    "id": window.id,
                    "name": name,
                    "url": url,
                    "icon": icon
                },
                "async": false,
                "dataType": "json",
                "success": function (response) {
                    var result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("操作成功！");
                    }
                    if (result == "FAILED") {
                        layer.msg("操作失败！" + response.message);
                    }
                },
                "error": function (response) {
                    layer.msg(response.status + " " + response.statusText);
                }
            });
            $("#menuEditModal").modal("hide");
            generateTree();
        });
        //删除的确认模态框
        $("#treeDemo").on("click", ".removeBtn", function () {
            window.id = this.id;
            $("#menuConfirmModal").modal("show");
            // 获取 zTreeObj 对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
            // 根据 id 属性查询节点对象
            // 用来搜索节点的属性名
            var key = "id";
            // 用来搜索节点的属性值
            var value = window.id; var currentNode = zTreeObj.getNodeByParam(key, value); $("#removeNodeSpan").html(" 【 <i class='"+currentNode.icon+"'></i>"+currentNode.name+"】");
            return false;
        });
        //删除事件
        $("#menuRemoveBtn").click(function () {
            $.ajax({
                "url": "menu/remove",
                "type": "post",
                "data": {
                    "id": window.id
                },
                "async": false,
                "dataType": "json",
                "success": function (response) {
                    var result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("操作成功！");
                    }
                    if (result == "FAILED") {
                        layer.msg("操作失败！" + response.message);
                    }
                },
                "error": function (response) {
                    layer.msg(response.status + " " + response.statusText);
                }
            });
            $("#menuConfirmModal").modal("hide");
            generateTree();
        });
    });
</script>
<%@include file="/WEB-INF/include-nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                            class="glyphicon glyphicon-question-sign"></i></div>
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>